<template>
  <div>
    <div class="header fda">
      <div class="logotxt">
        <img src="../assets/xwylogo.png" alt="" />
        <span>江苏弦外音智造科技有限公司</span>
      </div>
      <div class="header_right fda">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#000"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">公司简介</el-menu-item>
          <el-menu-item index="3"
            ><router-link to="/give">服务内容</router-link></el-menu-item
          >
          <el-menu-item index="4">
            <router-link to="/excellentCase">成功案例</router-link>
          </el-menu-item>
          <el-menu-item index="5"
            ><router-link to="/cooperate?id=1"
              >合作机构</router-link
            ></el-menu-item
          >
          <el-menu-item index="6"
            ><router-link to="/news?id=1">新闻资讯</router-link></el-menu-item
          >
          <el-menu-item index="7">
            <router-link to="/contact?id=1">在线合作</router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/legal">法务服务</router-link>
          </el-menu-item>
        </el-menu>
        <div class="put">
          <el-input placeholder="请输入内容" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="block">
      <el-carousel height="7rem" :autoplay="false">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img style="width: 100%" :src="item.image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <div class="biaoti">
        <span style="margin-right: 0.24rem; font-weight: 600">我们的企业</span
        ><span>/ OUR ENTERPRISE</span>
      </div>
      <div class="fd box_nei">
        <div class="txt">
          <div class="name">关于江苏弦外音智造科技有限公司</div>
          <div style="font-size: 0.17rem" v-html="content.content"></div>
        </div>
        <div class="sp">
          <video
            controls
            src="../assets/shiping.mp4"
            id="videoId"
            autoplay
          ></video>
        </div>
      </div>
      <div class="shanye">
        <div class="sytop">
          <div class="top_left">
            <img src="../assets/logomax.png" alt="" />
          </div>
          <div class="top_center">
            <div class="bttitle" style="margin-bottom: 0.63rem">
              <span style="margin-right: 0.24rem; font-weight: 600; color: #fff"
                >场地配套</span
              ><span style="color: #fff">/ Supporting facilities</span>
            </div>
            <div class="top_shuju">
              <img src="../assets/shu1.png" alt="" />
              <div class="sj_right">
                <div class="sj_name">内容制作工厂</div>
                <div class="sj_neirong">
                  内容制作工厂面积达1000平方米，配备有专业图文、音视频制作设备，专业人员集中进行内容制作。
                </div>
              </div>
            </div>
            <div class="top_shuju" style="margin-top: 0.38rem">
              <img src="../assets/shu2.png" alt="" />
              <div class="sj_right">
                <div class="sj_name">实验仪器设备自动立体库</div>
                <div class="sj_neirong">
                  建设了实验仪器设备中转库面积达1500平方米，研制了配套码垛机器人，为仪器设备采购中转配套。
                </div>
              </div>
            </div>
          </div>
          <div class="top_right">
            <img src="../assets/tuzu.png" alt="" />
          </div>
        </div>

        <div
          class="biaoti"
          style="margin: 0 auto; margin-top: 0.5rem; margin-bottom: 0.63rem"
        >
          <span style="margin-right: 0.24rem; font-weight: 600; color: #fff"
            >辐射区域</span
          ><span style="color: #fff">/ Radiation Area</span>
        </div>
        <div class="sy2">
          <img src="../assets/sy2.png" alt="" />
        </div>
        <div class="sytxt">已在9个省建立服务站点22个，形成服务网络</div>
        <div
          class="biaoti"
          style="margin: 0 auto; margin-top: 1.5rem; margin-bottom: 0.63rem"
        >
          <span style="margin-right: 0.24rem; font-weight: 600">商业模式</span
          ><span style="color: #aaaaaa">/ Business Model</span>
        </div>
        <div class="kuang">
          <div class="sy1">
            <img src="../assets/sy1.png" alt="" />
          </div>
        </div>
      </div>
      <div class="ziyan">
        <div class="biaoti">
          <span style="margin-right: 0.24rem; font-weight: 600; color: #fff"
            >自研产品</span
          ><span style="color: #aaaaaa">/ Self developed products</span>
        </div>
        <div class="jj1">
          <img src="../assets/jj1.png" alt="" />
        </div>
        <div class="jj2">
          <img src="../assets/jj2.png" alt="" />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="fd nei">
        <div class="footer_left">
          <img src="../assets/logohui.png" class="logohui" alt="" />
          <p style="margin: 0.2rem auto">©江苏弦外音智造科技有限公司</p>
          <p>京ICP证888888号</p>
        </div>
        <div>
          <p style="font-size: 0.17rem; font-weight: 600">
           <a href="https://www.amap.com/search?query=%E5%8D%97%E4%BA%AC%E5%B8%82%E6%A0%96%E9%9C%9E%E5%8C%BA%E5%85%B4%E6%99%BA%E7%A7%91%E6%8A%80%E5%9B%ADA%E5%BA%A711%E6%A5%BC&city=320000&geoobj=117.784963%7C31.496393%7C120.311263%7C32.627805&zoom=9.65">地址：南京市栖霞区兴智科技园A座11楼</a> 
          </p>
          <p style="margin: 0.14rem auto">
            微信：19996669669
          </p>
          <p><a href="tel:19996669669">全国24小时服务热线：199 9666 9669</a></p>
          <p style="margin-top: 0.13rem"><a href="https://mail.163.com/">商务合作邮箱：m19996669669@163.com</a> </p>
        </div>
        <div>
          <img class="footer_ma" src="../assets/ma.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { banner, config } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      aa: "color:red",
      input4: "",
      queryForm: {
        type: 1,
      },
      content: "",
    };
  },
  created() {},
  mounted() {
    banner(this.queryForm).then((response) => {
      console.log(response);
      this.list = response.rows;
    });

    config().then((response) => {
      console.log(response.data);
      this.content = response.data;
    });
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 返回上一层
    go() {
      this.$router.go(-1);
    },
    // // 查看用户
    handleCha() {
      this.$router.push({
        name: "/school",
        // query: { classId: row.id, schoolId: row.schoolId, name: row.name },
      });
    },
  },
};
</script>
 <style lang="scss">
p > img {
  width: 90%;
  margin: 0 auto;
  margin-top:0.1rem ;

}

// .ql-align-center {
//   text-align: center;
//   margin-top: 0.1rem;
// }
// img {
//   width: 80%;
// }
</style>

<style  lang="less" scoped>
.jj1 {
  width: 14.06rem;
  height: 6.18rem;
  margin: 0.5rem auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.jj2 {
  width: 10rem;
  height: 5rem;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}

.shanye {
  margin-top: 2rem;
  // background-color: #011842;
  background: url("../assets/sybg.png") no-repeat;
  background-size: 100% 100%;
  .sytop {
    display: flex;
    justify-content: space-between;
    padding: 0.58rem 0.3rem 0.58rem 1.28rem;
    box-sizing: border-box;
    .top_left {
      width: 4.89rem;
      height: 5.51rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .top_center {
      width: 40%;
      .bttitle {
        font-size: 0.32rem;
      }
      .top_shuju {
        display: flex;
        color: #fff;
        img {
          width: 2.88rem;
          height: 2.16rem;
          margin-right: 0.41rem;
        }
        .sj_name {
          font-size: 0.2rem;
          margin-bottom: 0.26rem;
        }
        .sj_neirong {
          font-size: 0.17rem;
        }
      }
    }
    .top_right {
      width: 3.7rem;
      height: 5.48rem;
      margin-top: -2rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .sy2 {
    width: 14.74rem;
    height: 4.83rem;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .sytxt {
    font-weight: 600;
    font-size: 0.2rem;
    margin-top: 0.39rem;
    text-align: center;
  }
  .kuang {
    width: 90%;
    margin: 0 auto;
    border-radius: 0.4rem;
    background-color: rgba(139, 139, 139, 0.4);
    margin-bottom: 0.5rem;
    .sy1 {
      width: 14.91rem;
      height: 7rem;
      margin: 0 auto;
      line-height: 7rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        // width: 90%;
        height: 90%;
      }
    }
  }
}
.ziyan {
  margin-top: 0.1rem;
  // background-color: #011842;
  background: url("../assets/jjbg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.38rem 0;
  box-sizing: border-box;
}
/deep/.el-menu-item {
  font-size: 0.14rem;
  padding: 0 0.2rem;
  cursor: pointer;
}
/deep/.el-input__inner {
  border-radius: 1rem !important;
}
/deep/.el-submenu__title {
  font-size: 0.14rem;
  color: #303133;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.el-input__inner {
  border-radius: 1rem !important;
}
.header {
  width: 100%;
  padding: 0.19rem 0.32rem;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  .logotxt {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    font-weight: 600;
    img {
      width: 0.44rem;
      margin-right: 0.12rem;
    }
  }
  .header_right {
    .put {
      width: 1.8rem;
      display: flex;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 0.14rem;
  opacity: 0.75;
  line-height: 1.5rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.box {
  padding: 0.76rem 0 0rem 0;
  box-sizing: border-box;
  .biaoti {
    font-size: 0.32rem;
    text-align: center;
  }
  .box_nei {
    width: 70%;
    margin: 0 auto;
    margin-top: 0.62rem;

    text-align: left;
    .name {
      font-size: 0.34rem;
      font-weight: 600;
      margin-bottom: 0.43rem;
    }
    .sp {
      width: 5.5rem;
      height: 4.98rem;
      border-radius: 0.15rem;
      min-height: 3.61rem;
      video {
        width: 100%;
        height: 100%;
      }
    }
    .txt {
      width: 45%;
    }
  }
}

.fd {
  display: flex;
  justify-content: space-between;
}
.fda {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer {
  width: 100%;
  background-color: #f6f6f6;
  padding: 0.54rem 0;
  box-sizing: border-box;
}
.nei {
  width: 70%;
  margin: 0 auto;
  text-align: left;
  color: #484848;
  font-size: 0.15rem;
}

.footer_ma {
  width: 1.2rem;
}
.logohui {
  width: 0.56rem;
  max-width: 0.56rem;
}
</style>